<!DOCTYPE html>
<html>
<head>
    <title>Image List</title>
</head>
<style>
    img{
    height:450px;
    width:100%;
    }
</style>
<body>
<ul style="list-style-type: none;padding-left:10px;padding-right:10px">
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img1.jpg" alt="Image 1"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img2.jpg" alt="Image 2"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img3.jpg" alt="Image 3"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img4.jpg" alt="Image 4"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img5.jpg" alt="Image 5"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img1.jpg" alt="Image 1"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img2.jpg" alt="Image 2"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img3.jpg" alt="Image 3"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img4.jpg" alt="Image 4"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img5.jpg" alt="Image 5"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img1.jpg" alt="Image 1"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img2.jpg" alt="Image 2"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img3.jpg" alt="Image 3"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img4.jpg" alt="Image 4"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img5.jpg" alt="Image 5"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img1.jpg" alt="Image 1"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img2.jpg" alt="Image 2"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img3.jpg" alt="Image 3"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img4.jpg" alt="Image 4"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img5.jpg" alt="Image 5"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img1.jpg" alt="Image 1"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img2.jpg" alt="Image 2"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img3.jpg" alt="Image 3"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img4.jpg" alt="Image 4"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img5.jpg" alt="Image 5"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img1.jpg" alt="Image 1"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img2.jpg" alt="Image 2"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img3.jpg" alt="Image 3"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img4.jpg" alt="Image 4"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img5.jpg" alt="Image 5"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img1.jpg" alt="Image 1"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img2.jpg" alt="Image 2"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img3.jpg" alt="Image 3"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img4.jpg" alt="Image 4"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img5.jpg" alt="Image 5"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img1.jpg" alt="Image 1"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img2.jpg" alt="Image 2"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img3.jpg" alt="Image 3"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img4.jpg" alt="Image 4"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img5.jpg" alt="Image 5"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img1.jpg" alt="Image 1"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img2.jpg" alt="Image 2"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img3.jpg" alt="Image 3"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img4.jpg" alt="Image 4"></li>
    <li><img src="https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/IM/Chat/products/phone/entry/src/main/resources/base/media/icon_me_photo.png" data-src="https://gitee.com/harmonyos-cases/cases/raw/master/test/performance/web_slide_white_block/WebSlideWhiteBlockPositive/entry/src/main/resources/base/media/img5.jpg" alt="Image 5"></li>
    <!-- 添加更多的图片只需要复制并修改src和alt属性即可 -->
</ul>
</body>
<script>
    window.onload = function(){
      // 视口作为根元素，不进行扩展
      const options = {root:document,rootMargin:'0% 0% 0% 0%'}
      // 创建一个IntersectionObserver实例
      const observer = new IntersectionObserver(function(entries,observer){
        entries.forEach(function(entry){
          // 检查图片是否进入可视区域
          if(entry.isIntersecting){
            const image = entry.target;
            // 将数据源的src赋值给img的src
            image.src = image.dataset.src;
            // 停止观察该图片
            observer.unobserve(image);
          }
        })
      },options);

      document.querySelectorAll('img').forEach(img => { observer.observe(img) });
    }
</script>
</html>